<template>
    <div v-loading="loading" class="app-container dialog">
        <div class="title">系统升级/变更dd</div>
        <div class="Subhead">基本信息</div>
        <el-form
            :model="form"
            :rules="rules"
            ref="ruleForm"
            label-position="right"
            label-width="100px"
            class="demo-ruleForm"
        >
            <el-form-item label="标题" prop="title">
                <el-input style="width: 760px" v-model="form.title"></el-input>
            </el-form-item>
            <el-row>
                <el-col :span="6">
                    <el-form-item label="联系人" prop="contact_person">
                        <el-input v-model="form.contact_person"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="负责人" prop="person_in_charge">
                        <el-input v-model="form.person_in_charge"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="联系方式" prop="contact_information">
                        <el-input v-model="form.contact_information"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="4">
                    <el-form-item label="单位审核" prop="unit_audit">
                        <el-radio-group
                            @change="UnitAuditChange"
                            v-model="form.unit_audit"
                        >
                            <el-radio label="true">是</el-radio>
                            <el-radio label="false">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item
                        v-if="IsUnitAudit"
                        label="审核单位"
                        prop="Auditunit"
                    >
                        <el-cascader
                            :props="{ value: 'id', checkStrictly: true }"
                            :show-all-levels="false"
                            @change="deptChange"
                            v-model="officeId"
                            placeholder="请选择，可搜索"
                            :options="dept"
                            clearable
                            filterable
                        ></el-cascader>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item
                        v-if="IsUnitAudit"
                        label="审核人员"
                        prop="Auditunit"
                    >
                        <el-select
                            clearable
                            style="width: 200px"
                            v-model="form.audit_person"
                            :placeholder="
                                form.officeId
                                    ? '请选择审核人员'
                                    : '请先选择审核部门'
                            "
                        >
                            <el-option
                                v-for="item in users"
                                :key="item.userName"
                                :label="item.nickName"
                                :value="item.userName"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <div class="Subhead">需求信息</div>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="应用系统" prop="app_system">
                        <el-select
                            clearable
                            filterable
                            v-model="form.app_system"
                            @change="changeappSystem"
                        >
                            <el-option
                                v-for="item in xtList"
                                :key="item.id"
                                :label="item.projectname"
                                :value="item.id"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="影响范围" prop="scope_of_influence">
                        <el-select
                            clearable
                            filterable
                            @change="ChangeScopeInfluence"
                            v-model="form.scope_of_influence"
                        >
                            <el-option
                                v-for="item in ScopeInfluenceList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="升级/变更时间" prop="up_change_time">
                        <el-date-picker
                            v-model="form.up_change_time"
                            type="datetimerange"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            placeholder="选择日期时间"
                            format="yyyy-MM-dd HH:mm:ss"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            align="right"
                        >
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col v-show="isinfluence" :span="6">
                    <el-form-item label="影响时间" prop="influence_time">
                        <el-date-picker
                            v-model="form.influence_time"
                            type="datetimerange"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            placeholder="选择日期时间"
                            format="yyyy-MM-dd HH:mm:ss"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            align="right"
                        >
                        </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
            <div class="tabletitle">
                IP地址明细
                <img
                    style="width: 20px; cursor: pointer; vertical-align: middle"
                    @click="add()"
                    src="../../../assets/icons/add.png"
                    alt=""
                />
            </div>
            <Table :columns="columns" :data="data">
                <template slot-scope="{ row, index }" slot="Type">
                    <el-select clearable filterable v-model="data[index].Type">
                        <el-option
                            v-for="item in TypeList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        >
                        </el-option>
                    </el-select>
                </template>
                <template slot-scope="{ row, index }" slot="ChangeTitle">
                    <Input type="text" v-model="data[index].ChangeTitle" />
                </template>
                <template
                    slot-scope="{ row, index }"
                    slot="ContentBeforeChange"
                >
                    <Input
                        type="text"
                        v-model="data[index].ContentBeforeChange"
                    />
                </template>
                <template slot-scope="{ row, index }" slot="ContentAfterChange">
                    <Input
                        type="text"
                        v-model="data[index].ContentAfterChange"
                    />
                </template>
                <template slot-scope="{ row, index }" slot="BackupStatus">
                    <el-select
                        clearable
                        filterable
                        v-model="data[index].BackupStatus"
                    >
                        <el-option
                            v-for="item in BackupStatusList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        >
                        </el-option>
                    </el-select>
                </template>
                <template slot-scope="{ row, index }" slot="changeTime">
                    <el-date-picker
                        style="width: 100%"
                        v-model="data[index].changeTime"
                        align="right"
                        type="date"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        placeholder="选择时间"
                        :picker-options="pickerOptions"
                    >
                    </el-date-picker>
                </template>
                <template slot-scope="{ row, index }" slot="remarks">
                    <Input
                        type="text"
                        v-model="data[index].remarks"
                        v-if="editIndex !== index"
                    />
                </template>

                <template slot-scope="{ row, index }" slot="action">
                    <!-- <Button @click="handleSave(row, index)">保存</Button> -->
                    <Button type="error" @click="remove(index)">删除</Button>
                    <!-- <div v-if="editIndex === index">
                    <Button @click="handleSave(index)">保存</Button>
                    <Button @click="editIndex = -1">取消</Button>
                </div>
                <div v-else>
                    <Button @click="handleEdit(row, index)">操作</Button>
                    <Button type="error" @click="remove(index)">删除</Button>
                </div> -->
                </template>
            </Table>
            <el-form-item label="需求内容">
                <editor
                    v-model="form.demand_content"
                    style="
                        min-height: 192px;
                        max-height: 400px;
                        overflow-y: auto;
                    "
                    :min-height="192"
                    :max-height="400"
                />
            </el-form-item>
        </el-form>
        <div class="Subhead">
            附件
            <el-upload
                style="display: inline-block"
                class="upload-demo"
                accept
                list-type="picture"
                :show-file-list="false"
                ref="upload"
                :file-list="fileList"
                action=""
                :on-remove="handleChange"
                :on-change="handleChange"
                :auto-upload="false"
            >
                <img
                    style="width: 20px; cursor: pointer; vertical-align: middle"
                    src="../../../assets/icons/add.png"
                    alt=""
                />
            </el-upload>
        </div>
        <el-table :data="fileList">
            <el-table-column label="文件名称">
                <template slot-scope="scope">
                    {{
                        scope.row.name.substring(
                            0,
                            scope.row.name.lastIndexOf(".")
                        )
                    }}
                </template>
            </el-table-column>
            <el-table-column label="文件类型">
                <template slot-scope="scope">
                    {{
                        scope.row.name.substring(
                            scope.row.name.lastIndexOf(".") + 1,
                            scope.row.name.length
                        )
                    }}
                </template>
            </el-table-column>
            <el-table-column
                label="操作"
                width="100"
                class-name="small-padding fixed-width"
            >
                <template slot-scope="scope">
                  <el-button
                      v-show="['image/jpeg','image/jpg','image/png','image/pdf','image/gif'].indexOf(scope.row.raw.type)>-1"
                      size="mini"
                      type="text"
                      icon="el-icon-view"
                      @click="previewFile(scope.row)"
                      >预览
                  </el-button>
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-delete"
                        @click="DeleteFile(scope.row, scope.$index)"
                        >删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div style="text-align: center; margin-top: 20px; margin-bottom: 20px">
            <el-button type="success" @click="sumit"> 提交工单 </el-button>
        </div>
        <el-dialog :visible.sync="dialogVisible">
            <div style="max-height: 90vh; overflow-y: scroll">
                <img width="100%" :src="dialogImageUrl" alt="" />
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { treeselect } from "@/api/system/dept";
import Editor from "@/components/Editor";
import { AllcloudUpList } from "@/api/cloud/cloud";
import { definition } from "@/api/WorkOrder/OperationMaintenance.js";
import { listUser2 } from "@/api/system/user";
import { uploadFile } from "@/api/system/upload.js";
export default {
    name: "SystemUpgrade",
    components: {
        Editor,
    },
    data() {
        return {
          dialogVisible:false,
          dialogImageUrl:'',
            form: {
                unit_audit: "false",
                audit_unit: null,
                audit_person: null,
            },
            cloudSupplier: '',
            appSystem:'',
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
                shortcuts: [
                    {
                        text: "今天",
                        onClick(picker) {
                            picker.$emit("pick", new Date());
                        },
                    },
                    {
                        text: "昨天",
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit("pick", date);
                        },
                    },
                    {
                        text: "一周前",
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit("pick", date);
                        },
                    },
                ],
            },
            isinfluence: false,
            IsUnitAudit: false,
            //上云系统列表
            xtList: [],
            // 类型下拉数据列表
            TypeList: [
                {
                    id: "系统升级",
                    name: "系统升级",
                },
                {
                    id: "系统变更",
                    name: "系统变更",
                },
            ],
            // 备份状态下拉数据类别
            BackupStatusList: [
                {
                    id: "已备份完成",
                    name: "已备份完成",
                },
                {
                    id: "未备份",
                    name: "未备份",
                },
                {
                    id: "无需备份",
                    name: "无需备份",
                },
            ],
            fileList: [],
            rules: {
                title: [
                    { required: true, message: "请输入标题", trigger: "blur" },
                ],
                contact_person: [
                    { required: true, message: "请输入联系人", trigger: "blur" },
                ],
                person_in_charge: [
                    { required: true, message: "请输入负责人", trigger: "blur" },
                ],
                contact_information: [
                    { required: true, message: "请输入联系方式", trigger: "blur" },
                ],
                app_system: [
                    {
                        required: true,
                        message: "请选择应用系统",
                        trigger: "change",
                    },
                ],
            },
            applicationSystem: null,
            IpType: null,
            PortManage: null,
            port: null,
            portType: null,
            remarks: null,
            officeId: "",
            users: [],
            columns: [
                {
                    title: "类型",
                    slot: "Type",
                },
                {
                    title: "变更主题/IP地址",
                    slot: "ChangeTitle",
                },
                {
                    title: "变更前内容",
                    slot: "ContentBeforeChange",
                },
                {
                    title: "变更后内容",
                    slot: "ContentAfterChange",
                },
                {
                    title: "备份状态",
                    slot: "BackupStatus",
                },
                {
                    title: "变更时间",
                    slot: "changeTime",
                },
                {
                    title: "备注",
                    slot: "remarks",
                },
                {
                    title: "操作",
                    slot: "action",
                },
            ],
            ScopeInfluenceList: [
                {
                    id: "无影响",
                    name: "无影响",
                },
                {
                    id: "影响时间",
                    name: "影响时间",
                },
                {
                    id: "部分租户",
                    name: "部分租户",
                },
                {
                    id: "资源地",
                    name: "资源地",
                },
                {
                    id: "全平台",
                    name: "全平台",
                },
            ],
            data: [],
            editIndex: -1, // 当前聚焦的输入框的行数
            editapplicationSystem: "",
            editIpType: "",
            editPortManage: "",
            editport: "",
            editportType: "",
            editremarks: "",
            fileList: [],
            loading:false,
        };
    },
    created() {
        this.GetListSelect();
    },
    methods: {
      previewFile(item){
         this.dialogImageUrl =  item.url;
         this.dialogVisible = true;
      },
        changeappSystem(val){
            this.xtList.forEach(item=>{
                if(item.id == val){
                    this.cloudSupplier = item.supplierCode
                }
            })
        },
        ChangeScopeInfluence(e) {
            if (e == "影响时间") {
                this.isinfluence = true;
            } else {
                this.isinfluence = false;
                this.form.influence_time = null;
            }
        },
        UnitAuditChange(e) {
            if (e == "true") {
                this.IsUnitAudit = true;
            } else {
                this.IsUnitAudit = false;
                this.form.audit_unit = null;
                this.form.audit_person = null;
                this.officeId = null;
            }
        },
        getName(data, id) {
            data.forEach((item) => {
                if (item.id == id) {
                    this.form.officeName = item.label;
                } else if (item.children && item.children.length) {
                    this.getName(item.children, id);
                }
            });
        },
        deptChange(e) {
            this.users = [];
            this.form.audit_person = "";
            this.form.audit_unit = "";
            if (e.length) {
                this.form.audit_unit = e[e.length - 1];
                this.getName(this.dept, this.form.audit_unit);
                listUser2({
                    deptId: this.form.audit_unit,
                    pageNum: 1,
                    pageSize: 10000000,
                }).then((response) => {
                    this.users = response.rows;
                });
            }
        },
        GetListSelect() {
            treeselect({}).then((response) => {
                this.dept = response.data;
            });
            AllcloudUpList().then((response) => {
                this.xtList = response.rows;
            });
        },
        handleChange(row, fileList) {
            this.fileList = fileList;
        },
        DeleteFile(data, index) {
            this.fileList = this.fileList.filter((item) => {
                if (item.uid == data.uid) {
                } else {
                    return item;
                }
            });
        },
        add() {
            let addObj = JSON.parse(
                JSON.stringify({
                    Type: "系统升级",
                    remarks: "",
                })
            );
            this.data.push(addObj);
        },
        handleSave(row, index) {
            this.data[index] = row;
        },
        remove(index) {
            this.$confirm("此操作将永久删除该行数据, 是否继续?", "提示", {
                confirmButtonText: "删除",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.data.splice(index, 1);
                    this.$message({
                        type: "success",
                        message: "删除成功!",
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
        ReturnSuperior(){
            this.$store.state.tagsView.visitedViews.splice(this.$store.state.tagsView.visitedViews.findIndex(item => item.path === this.$route.path), 1)
            this.$destroy(this.$options.name)
            this.$router.go(-1)
        },
        sumit() {
            this.$refs["ruleForm"].validate((valid) => {
                if (valid) {
                    if (this.fileList.length > 0) {
                        this.loading = true
                        let Files = new FormData()
                        Files.append("key", "file")
                        this.fileList.forEach((item) => {
                            if (item.raw) {
                                Files.append("file", item.raw)
                            }
                        });
                        uploadFile(Files).then((response) => {
                            this.fileList = [];
                            this.form.ip_detauked = this.data
                            if (this.form.up_change_time) {
                                this.form.up_change_time =
                                    this.form.up_change_time.join(",")
                            }
                            if (this.form.influence_time) {
                                this.form.influence_time =
                                    this.form.influence_time.join(",")
                            }
                            let obj = {
                                formData: this.form,
                                variables:{
                                    cloudSupplier: this.cloudSupplier.toLowerCase() + '_cloud_provider',
							deptId: sessionStorage.getItem("deptId"),//当前登录人部门
							deptScope: "UP_CASCADE",//部门范围，向上级联
                                },
                                formDefKey: "systemUpOrChange",
                                title: this.form.title,
                                files: response.data,
                            };
                            definition("xiezhu_reos", obj)
                                .then((res) => {
                                    if (res.code == 200) {
                                        this.$message({
                                            message: res.msg,
                                            type: "success",
                                        });
                                        this.form = {};
                                        this.data = [];
                                        this.form.audit_unit = null;
                                        this.form.audit_person = null;
                                        this.ReturnSuperior()
                                        this.loading = false
                                    }
                                })
                                .catch((err) => {
                                    if (
                                        typeof this.form.up_change_time ==
                                        "string"
                                    ) {
                                        this.form.up_change_time =
                                            this.form.up_change_time.split(",")
                                    }
                                    if (
                                        typeof this.form.influence_time ==
                                        "string"
                                    ) {
                                        this.form.influence_time =
                                            this.form.influence_time.split(",")
                                    }
                                    this.loading = false
                                    this.$message({
                                        message: res.msg,
                                        type: "error",
                                    });
                                });
                        }).catch(err=>{
                            this.loading = false
                        })
                    } else {
                        this.loading = true
                        this.form.ip_detauked = this.data;
                        if (this.form.up_change_time) {
                            this.form.up_change_time =
                            this.form.up_change_time.join(",")
                        }
                        if (this.form.influence_time) {
                            this.form.influence_time =
                            this.form.influence_time.join(",")
                        }
                        let obj = {
                            formData: this.form,
                            formDefKey: "systemUpOrChange",
                            variables:{
                                cloudSupplier: this.cloudSupplier.toLowerCase() + '_cloud_provider',
							deptId: sessionStorage.getItem("deptId"),//当前登录人部门
							deptScope: "UP_CASCADE",//部门范围，向上级联
                            },
                            title: this.form.title,
                        };
                        definition("xiezhu_reos", obj).then((res) => {
                            if (res.code == 200) {
                                this.$message({
                                    message: res.msg,
                                    type: "success",
                                });
                                this.form = {};
                                this.data = [];
                                this.form.audit_unit = null;
                                this.form.audit_person = null;
                                this.ReturnSuperior()
                                this.loading = false
                            }
                        })
                        .catch((err) => {
                            if (
                                typeof this.form.up_change_time ==
                                "string"
                            ) {
                                this.form.up_change_time =
                                    this.form.up_change_time.split(",")
                            }
                            if (
                                typeof this.form.influence_time ==
                                "string"
                            ) {
                                this.form.influence_time =
                                    this.form.influence_time.split(",")
                            }
                            this.loading = false
                            this.$message({
                                message: res.msg,
                                type: "error",
                            });
                        });
                    }
                } else {
                    return false;
                }
            });
        },
    },
};
</script>

<style scoped lang="scss">
.dialog {
    .title {
        text-align: left;
        margin-bottom: 20px;
        font-size: 18px;
        font-weight: bold;
        padding-left: 4px;
        border-left: 4px solid #38b3aa;
    }
    .Subhead {
        text-align: left;
        margin-bottom: 20px;
        font-size: 14px;
        font-weight: bold;
        padding-left: 4px;
        border-left: 2px solid #38b3aa;
    }
    .tabletitle {
        width: 100%;
        text-align: center;
        font-weight: bold;
        border: 1px solid rgb(248, 248, 249);
        height: 40px;
        line-height: 40px;
        border-bottom: none;
    }
}
</style>
